<template>
  <div class="sxk-input-box">
    <input
      class="sxk-input"
      :class="{
        'sxk-input-suffix': clearable || ShowPasswordIcon,
        'sxk-input-suffixs': showWordLimit
      }"
      :type="inputType"
      :placeholder="placeholder"
      :style="'width:' + width + 'px'"
      @input="handleSxkInput"
      :maxlength="maxlength"
      :minlength="minlength"
      :value="inputContend"
      :clearable="clearable"
    />
    <span v-if="showWordLimit" class="sxk-input-span">
      {{ inputContend.length + '/' + maxlength }}
    </span>
    <i
      class="sxk-icon error sxk-input-i"
      v-if="clearable && inputContend"
      @click="handleEmpty"
    ></i>
    <i
      class="sxk-icon browse sxk-input-i"
      v-if="
        ShowPasswordIcon && inputContend && password && inputType == 'password'
      "
      @click="handleShow('text')"
    ></i>
    <i
      class="sxk-icon eye-close sxk-input-i"
      v-if="
        ShowPasswordIcon && inputContend && password && inputType !== 'password'
      "
      @click="handleShow('password')"
    ></i>
  </div>
</template>

<script>
export default {
  name: 'sxk-input',
  data () {
    return {
      inputContend: '', // 内容
      inputType: ''
    }
  },
  props: {
    // 描述文字
    placeholder: {
      type: String,
      default: ''
    },

    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },

    // 是否是密码框
    password: {
      type: Boolean,
      default: false
    },

    // 设置宽度
    width: {
      type: String,
      default: ''
    },

    // 输入框中的最大值
    maxlength: {
      type: String,
      default: ''
    },

    // 是否显示最大值文字
    showWordLimit: {
      type: Boolean,
      default: false
    },

    // 输入框中的最小值
    minlength: {
      type: String,
      default: ''
    },

    // v-mode的默认值
    value: {
      type: String,
      default: ''
    },

    // 是否能清空
    clearable: {
      type: Boolean,
      default: false
    },

    // 是否显示密码
    ShowPasswordIcon: {
      type: Boolean,
      default: false
    }
  },

  mounted () {
    this.inputContend = this.value
    this.inputType = this.password ? 'password' : 'text'
  },

  methods: {
    handleSxkInput (e) {
      this.inputContend = e.target.value
      this.$emit('sxkInput', e.target.value)
    },

    // 点击清空图标
    handleEmpty () {
      this.inputContend = ''
    },

    // 点击密码显示按钮
    handleShow (item) {
      this.inputType = item
    }
  }
}
</script>

<style lang="less" scoped>
.sxk-input-box {
  margin: 20px;
  position: relative;
  display: inline-block;
  .sxk-input {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: 15px;
    height: 40px;
    width: 200px;
    line-height: 40px;
    outline: none;
    padding: 0 10px;
  }

  .sxk-input:hover {
    border-color: #c0c4cc;
  }

  .sxk-input:focus {
    outline: none;
    border-color: #409eff;
  }

  .sxk-input-span {
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    color: #909399;
    font-size: 12px;
  }

  .sxk-input-suffix {
    padding-right: 30px;
  }

  .sxk-input-suffixs {
    padding-right: 50px;
  }

  .sxk-input-i {
    position: absolute;
    display: block;
    top: 5px;
    right: 5px;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    color: #909399;
    background-color: #fff;
    cursor: pointer;
  }
}
</style>
